<template>
  <Plane v-bind="$attrs" ref="planeRef" :args="length">
    <TresMeshToonMaterial color="orange" :opacity="0.5" :transparent="true" :side="THREE.DoubleSide" />
  </Plane>
</template>
<script lang="ts" setup>
import { Plane } from '@tresjs/cientos'
import { useRenderLoop } from '@tresjs/core'
import { Plane as PlaneGenerator } from '../../hooks/shapes'
import * as THREE from 'three'

const props = defineProps<{
  data: PlaneGenerator
}>()

const planeRef = shallowRef()
const length = shallowRef<any>([props.data.length, props.data.length])

const { onLoop } = useRenderLoop()

onLoop(() => {
  planeRef.value.instance.rotation.fromArray(props.data.rotation)
  planeRef.value.instance.position.fromArray(props.data.position)
  planeRef.value.instance.scale.fromArray(props.data.scale)
  length.value = [props.data.length, props.data.length]
})

</script>
